<template>
  <div class="main-operate">
    <Card class="data-card">
      <template slot="title">
        <p>设备台账</p>
      </template>
      <div class="main-operate-list">
        <Row>
          <i-col span="6">
            <p class="flex">
              <span class="title">区域：</span>
              <Select v-model="formItem.area" class="select-width">
                <Option value="码头">码头</Option>
              </Select>
            </p>
          </i-col>
          <i-col span="6">
            <p class="flex">
              <span class="title">类型：</span>
              <Select v-model="formItem.type" class="select-width">
                <Option value="全部">全部</Option>
              </Select>
            </p>
          </i-col>
          <i-col span="6">
            <p class="flex">
              <span class="title">使用状态：</span>
              <Select v-model="formItem.state" class="select-width">
                <Option value="正常">正常</Option>
              </Select>
            </p>
          </i-col>
          <i-col span="6" style="text-align: right">
            <Button type="primary">查询</Button>
            <Button style="margin-left: 5px">重置</Button>
            <!--<Button size="large" style="margin-left: 5px">-->
              <!--{{ msg }}-->
              <!--<Icon class=""></Icon>-->
            <!--</Button>-->
          </i-col>
        </Row>
        <div class="margin-top-20">
          <Button type="primary" icon="md-add" @click="addItem">
            新增
          </Button>
          <Button type="error" class="margin-left-5" icon="md-remove" @click="deleteItem">
            删除
          </Button>
          <Button type="primary" class="margin-left-5" icon="ios-open-outline">
            导入
          </Button>
          <Button type="primary" class="margin-left-5" icon="ios-open-outline">
            导出
          </Button>
          <Button type="primary" class="margin-left-5" icon="ios-copy-outline">
            打印
          </Button>
        </div>
        <Alert class="margin-top-20">
          <Icon type="ios-information-circle" style="color: blue;" :size="20"/>
          <span class="desc">已选择</span>
          <span style="color: blue;" class="desc">{{ selectDataList.length }}</span>
          <span class="desc">项</span>
          <span class="desc" style="color: blue; cursor: pointer; margin-left: 15px" @click="clearData">清空</span>
        </Alert>
        <el-table
          :data="data"
          height="calc(100vh - 195px)"
          border
          ref="tableRef"
          style="width: 100%;margin-top: 20px;"
          highlight-current-row
          :header-cell-style="headerCellStyle"
          @selection-change="selectionChange"
          oncontextmenu="return false;"
          sortable="custom"
          empty-text="暂无数据"
          v-loading="dataLoading">
          <el-table-column
            type="selection"
            width="36">
          </el-table-column>
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            v-for="(item, key) in columns" :key="key"
            :prop="item.key"
            :label="item.title"
            :width="item.width"
            align="center"
            :formatter="item.formatter"
            :sortable="item.sortable"
            :show-overflow-tooltip="true"
            :fixed="item.key=='userName'"
          >
            <template slot-scope="scope">
              <template v-if="item.type !== 'template'">
                {{$table.tableRowFormat(scope.row, item)}}
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="153">
            <template slot-scope="scope">
              <span style="color: rgb(51, 157, 255);cursor:pointer;" @click="getDetail(scope.row)" size="small">查看</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="margin-top-20" style="text-align: right">
          <Page :total="listQuery.total" :current="listQuery.pageNum" :page-size="listQuery.pageSize" :page-size-opts="listQuery.pageOptionsList"
                 @on-change="pageChange" @on-page-size-change="pageSizeChange" show-elevator show-sizer></Page>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
  export default {
    name: "MaintenanOperateDataInfo",
    data() {
      return {
        msg: '展开',
        selectDataList: [],
        listQuery: {
          total: 10,
          pageNum: this.$store.state.baseTask.pageNum,
          pageSize: this.$store.state.baseTask.pageSize,
          pageOptionsList: this.$store.state.baseTask.pageOptionsList,
          filterList: [],
          sortList: [],
          searchKey: ''
        },
        data: [],
        dataLoading: false,
        formItem: {
          area: '',
          type: '',
          state: ''
        },
        columns: [
          {
            key: 'equipName',
            title: '设备名称',
            width: 150
          },
          {
            key: 'equipCode',
            title: '设备编号',
            width: 150
          },
          {
            key: 'personLiable',
            title: '责任人',
            width: 150
          },
          {
            key: 'equipType',
            title: '设备类型',
            width: 150
          },
          {
            key: 'state',
            title: '使用状态',
            width: 150
          },
          {
            key: 'date',
            title: '启用时间',
            width: 150,
            type: 'date'
          }
        ]
      }
    },
    computed: {
      headerCellStyle() {
        return {
          fontSize: `${12}px`,
          fontWeight: 'bold',
          color: '#8c8c90',
          backgroundColor: 'rgba(239, 243, 247, .8)',
        }
      }
    },
    methods: {
      addItem() {
        this.$router.push({
          path: '/operate-equip-info'
        })
      },
      getDetail(row) {
        this.$router.push({
          path: '/operate-equip-info',
          query: {
            id: row.id
          }
        })
      },
      deleteItem() {
        if (!this.selectDataList.length) {
          this.$warn('请选择数据', 3);
          return;
        }
        for (let i = 0, len = this.selectDataList.length; i < len; i++) {
          let item = this.selectDataList[i];
          for (let j = 0, lens = this.$dataInfo.equipTableList.length; i < lens; i++) {
            let it = this.$dataInfo.equipTableList[j];
            if (item.id === it.id) {
              this.$dataInfo.equipTableList.splice(j, 1);
            }
          }
        }
        this.smulidateLoading();
      },
      init() {
        this.smulidateLoading();
        this.data = this.$dataInfo.equipTableList;
      },
      smulidateLoading() {
        this.dataLoading = true;
        let _this = this;
        setTimeout(() => {
          _this.dataLoading = false;
        }, 1000)
      },
      clearData() {
        this.$refs.tableRef.clearSelection();
        this.selectDataList = [];
      },
      selectionChange(selection) {
        this.selectDataList = selection;
      },
      pageChange (pageNum) {
        this.listQuery.pageNum = pageNum;
      },
      pageSizeChange (pageSize) {
        this.listQuery.pageSize = pageSize;
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style lang="less" scoped>
  @import "../styles/common";
  /deep/ .data-card .ivu-card-head p {
    font-size: 18px;
  }

  .select-width {
    width: 200px;
  }

  .margin-left-5 {
    margin-left: 5px;
  }

  .title {
    padding-top: 5px;
  }
  .desc {
    padding: 3px 5px;
  }
  .main-operate {
    margin-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    .data-card {
      width: 1200px;
      margin: 0 auto;
    }
    .main-operate-list {
      width: 100%;
      padding: 10px;
    }
  }
</style>
